//烧结首页
<template>
    <div class="container">
        <div class="content">
            <div class="content-top">
                <div id="score" class="score">

                </div>

            </div>
            <div class="content-bottom">
                <div v-for="(item,index) in menu_list" :key="index">
                    <div v-on:click="changeContent(index)">
                        <mt-cell :title="item.name" is-link>
                        </mt-cell>
                    </div>
                    <div v-show="item.show" >
                        <div v-for="(item,index) in item.detail" :key="index">
                            <mt-cell :title="item.name">
                                <p class="temp">{{item.temp}}</p>
                                <span>{{item.between}}</span>
                                <i class="fa fa-bell" aria-hidden="true"></i>
                                <i class="fa fa-heart" aria-hidden="true"></i>

                            </mt-cell>
                        </div>

                    </div>

                </div>

            </div>

        </div>
        <div class="replace">

        </div>
    </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    name: "cookingHome",
    data() {
      return {
        score_x: ['2018/10/11', '2018/10/12', '2018/10/13', '2018/10/14', '2018/10/15', '2018/10/16', '2018/10/17'],
        score_data: [80, 85, 86, 84, 88, 90, 85],
        menu_list: [
          {
            name: '主要工艺参数',
            detail: [{
              name: '上料量',
              temp: '150℃',
              between: '120～200'
            },
              {
                name: '返矿配比',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: '混合料水分（二混）',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: '布料参数',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: '炉膛负压',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: '大烟道负压-南',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: '大烟道负压-北',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: 'BTP温度-南',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: 'BTP温度-北',
                temp: '150℃',
                between: '120～200'
              },
            ],
            show: false
          },
          {
            name: '烧结矿质量',
            detail: [{
              name: 'R',
              temp: '150℃',
              between: '120～200'
            },
              {
                name: 'T',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: 'Tfe',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: 'Feo',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: 'Mg/Al',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: 'RDI',
                temp: '150℃',
                between: '120～200'
              },
            ],
            show: false

          },
          {
            name: '烧结矿实物照片',
            detail: [{
              name: '集气管温度',
              temp: '150℃',
              between: '120～200'
            },
              {
                name: '集气管温度',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: '集气管温度',
                temp: '150℃',
                between: '120～200'
              },
              {
                name: '集气管温度',
                temp: '150℃',
                between: '120～200'
              },
            ],
            show: false

          }

        ]
      };
    },
    mounted() {
      this.$nextTick(() => {
        const myChart_score = echarts.init(document.getElementById("score"));
        const option_score = {
          legend: {
            data: ['烧结评分']
          },
          xAxis: {
            type: 'category',
            data: this.score_x,
            axisLabel:{
              rotate:50
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '烧结评分',
            data: this.score_data,
            type: 'line'
          }]

        }
        myChart_score.setOption(option_score);

      })
    },
    methods:{
      changeContent(index) {
        this.menu_list[index].show = !this.menu_list[index].show;
      },
    }

  };
</script>

<style lang="scss" scoped>
    .score {
        width: 100vw;
        height: 300px;
    }
    .content-bottom{
        margin-top: 20px;
    }
    .replace{
        height: 28px;
    }

</style>
